<template>
	<view class="payment">
		<view class="nav">
			<view class="bom_bg"></view>
			<view class="nav_content">
				<view class="con_box">
					<view class="nav_head"></view>
					<view class="box_container">
						<view class="item">
							<image src="../static/image/cover.png"></image>
						</view>
						<view class="item1">
							<view class="header_rank">
								<view>
									<image :src="rankList[activeIndex].img"></image>
									<view>{{rankList[activeIndex].title}}</view>
								</view>
								<view>{{rankList[activeIndex].text}}</view>
							</view>
							<view class="option_check">
								<view v-for="(item,index) in optionList" :key="index" class="option"
									:class="{'active':activeIndex===index}" @click="headleChecked(index)">
									<view class="total">
										<view>¥</view>
										<view>{{Arrinfo[index]}}</view>
									</view>
									<view class="percent">{{item.percent}}</view>
									<view class="text">{{item.title}}</view>
									<view v-if="index===1" class="recommend">推荐</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="compile" @click="headleEdit">
					<image src="/static/image/back.png"></image>
					<view>编辑资料</view>
				</view>
			</view>
		</view>
		<view class="btn" :class="{'btnac':activeIndex===1}" @click="headlePayment">
			<view v-if="activeIndex===0">提交报名</view>
			<view v-if="activeIndex===1">支付{{Arrinfo[1]}}元并报名</view>
			<view v-if="activeIndex===2">支付{{Arrinfo[2]}}元并报名</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'payment',
		props: {
			Arrinfo: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				//级别匹配
				rankList: [{
						img: '/static/image/common.png',
						title: '普通匹配',
						text: '普通匹配，3～5%匹配成功率',
						price: '提交报名'
					},
					{
						img: '/static/image/advanced.png',
						title: '高级匹配',
						text: '第二优先级，匹配成功率80%，匹配失败全额退款',
						price: '支付9.9元并报名'
					},
					{
						img: '/static/image/precedence.png',
						title: '优先匹配',
						text: '最高优先级匹配，匹配率99%，未能匹配全额退款',
						price: '支付39.9元并报名'
					}
				],
				//支付选项
				optionList: [{
						total: 0,
						percent: '3～5%',
						title: '匹配成功率'
					},
					{
						total: 9.9,
						percent: '80%',
						title: '匹配成功率'
					},
					{
						total: 39.9,
						percent: '99%匹配',
						title: '优先特权'
					}
				],
				//选中项
				activeIndex: 1,
			}
		},
		onShow() {},

		methods: {
			//选项
			headleChecked(index) {
				this.activeIndex = index
				this.$emit('headleChecked', index + 1)
			},

			headleEdit() {
				this.$emit('headleEdit')
			},
			// 支付回调
			headlePayment() {
				this.$emit('headlePayment', this.activeIndex + 1)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.payment {
		.nav {
			position: relative;
			height: 1120upx;
			margin-bottom: 200upx;
		
			.bom_bg {
				width: 100%;
				height: 200upx;
				background-color: rgba(246, 244, 255, 100);
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
			}

			.nav_content {
				width: 100%;
				position: absolute;
				top: 70upx;
				z-index: 99;
				height: 950upx;

				.con_box {
					position: relative;

					.nav_head {
						margin: 0upx 30upx;
						width: 690upx;
						height: 60upx;
						border-radius: 20upx;
						background-color: rgba(130, 113, 239, 100);
						text-align: center;
						box-shadow: 0px 0px 8upx 0px rgba(130, 113, 239, 100);
						border: 8upx solid rgba(16, 16, 16, 0.05);
					}

					.box_container {
						position: absolute;
						top: 30upx;
						width: 650upx;
						height: 830upx;
						margin: 0upx 50upx;
						border-radius: 0px 0px 15px 15px;
						box-shadow: 0px 10px 20px 0px rgba(158, 149, 237, 0.3);
						background-color: #fff;

						.item {
							width: 100%;
							height: 400upx;
							background-color: rgba(158, 149, 237, 100);
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 430upx;
								height: 240upx;
							}
						}

						.item1 {
							padding: 40upx 30upx 36upx 30upx;
							box-sizing: border-box;

							.header_rank {
								color: rgba(255, 130, 35, 100);
								font-size: 26upx;

								view:first-child {
									display: flex;
									align-items: center;
									color: rgba(0, 0, 0, 0.8);
									font-size: 36upx;
									margin-bottom: 10upx;
									font-weight: 600;

									image {
										width: 50upx;
										height: 50upx;
										margin-right: 10upx;
									}
								}

							}
						}

						.option_check {
							margin-top: 40upx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: rgba(130, 113, 239, 100);


							.option {
								width: 182upx;
								height: 218upx;
								border-radius: 24upx;
								text-align: center;
								border: 2upx solid rgba(158, 149, 237, 0.3);
								font-size: 12px;
								position: relative;
								background-color: rgba(158, 149, 237, 0.1);

								.total {
									margin: 40upx 0upx 24upx;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 28upx;

									view:last-child {
										font-size: 40upx;
										margin-left: 6upx;
										font-weight: 600;
									}
								}

								.percent {
									margin-bottom: 6upx;
								}

								.recommend {
									position: absolute;
									width: 80upx;
									height: 48upx;
									border-radius: 40upx;
									line-height: 48upx;
									background-color: rgba(130, 113, 239, 100);
									color: rgba(255, 255, 255, 100);
									font-size: 24upx;
									text-align: center;
									box-shadow: 0px 0px 2px 0px rgba(130, 113, 239, 100);
									font-family: Arial;
									border: 2upx solid rgba(16, 16, 16, 0.05);
									top: -20upx;
									right: -8upx;
								}
							}

							.active {
								background-color: rgba(255, 130, 35, 0.10);
								color: rgba(255, 130, 35, 10);
								border: 2upx solid rgba(255, 130, 35, 30);

								.recommend {
									background-color: rgba(255, 130, 35, 100);
									text-align: center;
									box-shadow: 0px 0px 4upx 0px rgba(255, 130, 35, 100);
									border: 2upx solid rgba(16, 16, 16, 0.05);
								}
							}
						}
					}
				}

			}


			.compile {
				display: flex;
				justify-content: center;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				color: rgba(130, 113, 239, 100);
				font-size: 28upx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 6rpx;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 128upx;
			border-radius: 30upx 30upx 0upx 0upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(246, 244, 255, 100);
			z-index: 999;

			view {
				width: 690upx;
				height: 88upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50upx;
				background-color: rgba(130, 113, 239, 100);
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				text-align: center;
				box-shadow: 0px 0px 4upx 0px rgba(247, 218, 254, 100);
				font-weight: 600;
				border: 2upx solid rgba(0, 0, 0, 0.05);
			}
		}

		.btnac {
			view {
				background-color: rgba(255, 135, 48, 100);
			}
		}
	}
</style>
